<template>
	<gracePage :customHeader="false">
		<view slot="gBody">
			<view class="grace-wrap grace-flex-center"
				style="width: 750rpx;height: 430rpx; background-image: url(../../static/mybg.png);background-size: cover;">
				<view
					style="font-size:32rpx;font-weight:bold;color:rgba(255,255,255,1);position: relative;top: 143rpx;">
					{{ nickname? nickname:(name?name:'未认证')}}</view>
				<view
					style="font-size:32rpx;font-weight:bold;color:rgba(255,255,255,1);position: absolute;top: 183rpx;margin-top: 10rpx;">
					{{ phone }}</view>
				<view
					style="width:711rpx;height:240rpx;background:rgba(255,255,255,1);box-shadow:0rpx 3rpx 12rpx 1rpx rgba(222,71,66,0.25);border-radius:20rpx;position: relative;top: 300rpx;display: flex;justify-content: space-between;">
					<view v-for="item in personal_list" @tap="ction(item)"
						style="position: relative;text-align: center;top: 100rpx;margin: 0 30rpx;">
						<image :src="item.img" mode="" style="width: 50rpx;height: 51rpx;"></image>
						<text style="display: block;font-size: 24rpx;">{{item.name}}</text>
					</view>

				</view>
				<view
					style="width:180rpx;height:180rpx;background:rgba(255,255,255,1);box-shadow:0rpx 1rpx 10rpx 0rpx rgba(232,75,69,0.48);border-radius:50%;position: relative;bottom: 35rpx;">
					<image :src="headpic!=null && headpic!='' ?headpic: '../../static/lonin.png'"
						style="margin: 10rpx; width: 160rpx;height:140rpx;"></image>
				</view>
			</view>

			<view class="grace-columns" style="margin-top: 200rpx;">
				<view class="grace-rows grace-flex-vcenter"
					style="width: 750rpx;height: 100rpx;background:rgba(255,255,255,1);">
					<image src="../../static/personal_center_tuijian.png"
						style="margin-left: 46rpx; width: 38rpx;height: 38rpx;"></image>
					<text
						style="margin-left: 25rpx; font-size:28rpx;font-weight:400;color:rgba(102,102,102,1);">我的推荐人</text>
					<text
						style="margin-left: 306rpx; font-size:24rpx;font-weight:bold;color:rgba(153,153,153,1);">{{ u_pid }}</text>
				</view>
				<view @tap="xiugaipw" class="grace-rows grace-flex-vcenter"
					style="position: relative;top: 2rpx; width: 750rpx;height: 100rpx;background:rgba(255,255,255,1);">
					<image src="../../static/personal_center_xiugaimima.png"
						style="margin-left: 46rpx; width: 38rpx;height: 38rpx;"></image>
					<text
						style="margin-left: 25rpx; font-size:28rpx;font-weight:400;color:rgba(102,102,102,1);">修改密码</text>
					<image src="../../static/jiantou.png" style="margin-left: 469rpx; width: 12.8rpx;height: 22rpx;">
					</image>
				</view>
				<view @tap="my_zhiliao" class="grace-rows grace-flex-vcenter"
					style="position: relative;top: 5rpx;width: 750rpx;height: 100rpx;background:rgba(255,255,255,1);">
					<image src="../../static/personal_center_wodeziliao.png"
						style="margin-left: 46rpx; width: 38rpx;height: 38rpx;"></image>
					<text
						style="margin-left: 25rpx; font-size:28rpx;font-weight:400;color:rgba(102,102,102,1);">我的资料</text>
					<image src="../../static/jiantou.png" style="margin-left: 469rpx; width: 12.8rpx;height: 22rpx;">
					</image>
				</view>
				<view class="grace-rows grace-flex-vcenter" v-show="version" style="position: relative;top: 6rpx;width: 750rpx;height: 100rpx;background:rgba(255,255,255,1);">
					<image src="../../static/personal_center_changjianwenti.png"
						style="margin-left: 46rpx; width: 38rpx;height: 38rpx;"></image>
					<text
						style="margin-left: 20rpx; font-size:28rpx;font-weight:400;color:rgba(102,102,102,1);">版本号</text>
					<text
						style="margin-left: 455rpx; font-size:28rpx;font-weight:400;color:rgba(102,102,102,1);">{{version}}</text>
				</view>
			</view>
			<view style="margin-top: 80rpx;">
				<button type="primary" @tap="outlogin" class="grace-button button_color"
				:style="{background:button_color}">退出登录</button>
			</view>
			<view class="kef_s" @tap="qiaozhuandaokehu" @touchstart="drag_start" @touchmove.prevent="drag_hmove">
				<image src="../../static/kefs.png" :style="'left:'+moveX+'px;top:'+moveY+'px'" mode=""
					style="width: 152rpx;height:79rpx;transform: translate(4rpx,4rpx);"></image>
			</view>
			<ourLoading isFullScreen active text="加载中..." v-if="loadings" />
		</view>
	</gracePage>
</template>

<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	export default {
		data() {
			return {
				button_color:'',//按钮颜色
				nickname: null, //昵称
				name: '', //用户姓名
				headpic: null, //头像
				u_state: "", //认证状态
				u_pid: '', //用户推荐人信息[没有为空，有是json对象]
				phone: "1111", //用户手机
				identity: '暂无信息',
				is_update: 0,
				version: '',
				start: [0, 0],
				moveY: 0,
				moveX: 0,
				windowWidth: '',
				windowHeight: '',
				wdexians: false,
				personal_list: [], // 我的功能数组
				loadings: false // 加载遮罩层

			}
		},
		onLoad() {
			this.show_myshuju()
			const {
				windowWidth,
				windowHeight
			} = uni.getSystemInfoSync();
			this.windowWidth = windowWidth
			this.windowHeight = windowHeight
		},
		onReady() {
			var that = this;
			setTimeout(function() {
				that.wdexians = true
			}, 500)

		},
		onShow() {
			// #ifdef APP-PLUS
			var vm = this
			plus.runtime.getProperty( plus.runtime.appid, function ( wgtinfo ) {
					//version属性
					vm.version = wgtinfo.version;
					return
				} );
			// #endif
			this.show_myshuju()
			this.button_color = uni.getStorageSync('button_color');
		},
		methods: {
			// 获取页面数据
			show_myshuju() {
				var vm = this;
				vm.loadings = true
				this.myPost(
					'api/Userapi/getuser', {},
					function(res) {
						setTimeout(function() {
							vm.loadings = false
						}, 500)
						if (res.code == 200) {
							vm.name = res.data.name
							vm.phone = res.data.phone
							vm.nickname = res.data.nickname
							vm.headpic = res.data.level.vip_sign
							vm.u_pid = res.data.recommend_num
							var u_state = res.data.authentication
							if (u_state == 1) {
								vm.u_state = '已认证'
							} else if (u_state == 0) {
								vm.u_state = '未认证'
							}
							uni.setStorageSync('yohu', res.data.coupons)
						}

					},
					function() {
						setTimeout(function() {
							vm.loadings = false
						}, 500)
					}
				)
				this.myPost(
					'api/Personals/get_personal_config', {},
					function(res) {
						if (res.code == 200) {
							vm.personal_list = res.data
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					}
				)
			},
			// 退出登录事件
			outlogin() {
				uni.clearStorageSync()
				uni.redirectTo({
					url: '/pages/user/login'
				})
			},
			// 实名认证页面判断页面跳转事件
			ction(v) {
				uni.navigateTo({
					url: v.href
				})
				// if (v.name == '我的券包') {
				// 	uni.navigateTo({
				// 		url: v.href
				// 	})
				// } else if (v.name == '我的积分') {
				// 	uni.navigateTo({
				// 		url: v.href
				// 	})
				// } else if (v.name == '我的卡券') {
				// 	uni.navigateTo({
				// 		url: v.href
				// 	})
				// } else if (v.name == '实名认证') {
				// 	uni.navigateTo({
				// 		url: v.href
				// 	})
				// }

			},
			// 修改密码页面跳转事件
			xiugaipw() {
				uni.navigateTo({
					url: '/pages/user/forget_password'
				});
			},
			// 我的资料页面跳转事件
			my_zhiliao() {
				uni.navigateTo({
					url: '/pages/personal_center/my_ziliao'
				})
			},
			// 客服帮助按钮移动事件
			drag_start(event) {
				console.log(event.touches[0].clientX - event.target.offsetLeft);
				this.start[0] = event.touches[0].clientX - event.target.offsetLeft;
				this.start[1] = event.touches[0].clientY - event.target.offsetTop;
			},
			drag_hmove(event) {
				let tag = event.touches;
				if (tag[0].clientX < 0) {
					tag[0].clientX = 0
				}
				if (tag[0].clientY < 0) {
					tag[0].clientY = 0
				}
				if (tag[0].clientX > this.windowWidth) {
					tag[0].clientX = this.windowWidth
				}
				if (tag[0].clientY > this.windowHeight) {
					tag[0].clientY = this.windowHeight
				}
				this.moveX = tag[0].clientX - this.start[0];
				this.moveY = tag[0].clientY - this.start[1];
			},
			// 点击跳转客服聊天页面事件
			qiaozhuandaokehu() {
				var kehu_phone = uni.getStorageSync('kehu_phone');
				uni.makePhoneCall({
					phoneNumber:kehu_phone
				})
				console.log(kehu_phone);
			},
		},
		components: {
			gracePage,
		}

	}
</script>

<style>
	.kef_s {
		position: absolute;
		top: 1100rpx;
		left: 610rpx;
		z-index: 9999;
		float: right;
	}
	.button_color{
		width:702rpx;height:80rpx;background:#3187D5;border-radius:10rpx;font-weight:bold;color:rgba(255,255,255,1);font-size:32rpx;
	}
</style>
